<script>
  import EntityLine from './EntityLine.svelte';

  let { environment, world, select, selected, zoomlevel, name } = $props();
  let style = $derived(zoomlevel ? `font-size: ${zoomlevel*0.6}px` : '');
</script>

<section class="environment">
  <h3 {style}>{name}</h3>
  {#each environment.features as feature}
    <EntityLine {world} onclick={select} {selected} item={feature} {zoomlevel} />
  {/each}
  {#each environment.creatures as creature}
    <EntityLine {world} onclick={select} {selected} item={creature} {zoomlevel} />
  {/each}
  {#each environment.items as item}
    <EntityLine {world} onclick={select} {selected} item={item} {zoomlevel} />
  {/each}
</section>
